class List{
    constructor() {
        //获取元素
        this.container = document.querySelector('section>ul')
        this.span = document.querySelector('.all-right>span')
        this.init()
    }
    init() {
        this.request()
        //注意点：data数据是发送请求获取到的，在初始化的时候直接调用代码，异步代码是没有返回结果的所以是undefined
        this.cart()
        this.count()
    }
    request() {
        pAjax({url: 'data/goods.json'})
        .then((res)=>{
            let data = JSON.parse(res)
            data = data.slice(100, 160)
            this.render(data)
            this.cart(data)
        })
    }
    render(data) {
        data.forEach((item) => {
            //html/details.html?id=${item.goods_id}在查询字符串后面进行参数拼接，可以让网页跳转的时候把需要的参数携带到另一个网页
            this.container.innerHTML += `
                     <li>
                       <a href="http://127.0.0.1:2113/html/list.html?id=${item.goods_id}" style="text-decoration:none; color:black;">
                        <div class="pic">
                            <img src="${item.img_small_logo}">
                        </div>
                        <p class="title hide">${item.title}</p>
                        <p class="price">${item.price}</p>
                        </a>
                        <button data-id=${item.goods_id}>加入购物车</button>
                    </li>
                `
        })
    }
    cart(data){
        //做事件委派
        this.container.addEventListener('click', (e) => {
            e = e || window.event
            let target = e.target || e.srcElement
            //判断是否点击的是按钮
            if (target.nodeName == 'BUTTON') {
                //获取到每一个按钮的id
                let id = target.dataset.id - 0
                //当咱们点击对应的按钮的时候，获取到相应那条数据
                let goods = data.find((item) => { return item.goods_id == id })
                //先获取下购物车里面有没有数据，如果没有数据让它返回一个空数组
                let list = JSON.parse(localStorage.getItem('cart')) || []
                //判断里面有没有数据
                if (!list.length) {
                    //没有数据，如果能进到这个地方说明就是没有数据的
                    //没有数据，应该先把数据添加进数组，并让商品数量赋值为1
                    list.push(goods)
                    goods.cart_number = 1
                } else {
                    //如果有数据，先判断下数组里面有没有这条数据，防止重复存在
                    let res = list.some((item) => { return item.goods_id == id })
                    //如果数据相同，应该找到相同的数据让其商品数量自增+1
                    if (res) {
                        let index = list.findIndex((item) => { return item.goods_id == id })
                        list[index].cart_number++
                    } else {
                        //没有相同的，就把数据添加进数组
                        list.push(goods)
                        goods.cart_number = 1
                    }
                }
                //把对应的数据应该存储进购物车里面
                localStorage.setItem('cart', JSON.stringify(list))
                //当咱们点击按钮的时候，让商品数量进行变化
                this.count()
            }
        }, false)
    }
     count() {
        //先从购物车里面把数据提取出来
        let list = JSON.parse(localStorage.getItem('cart')) || []
        let num = 0
        //遍历进行数量增加
        list.forEach((item) => {
            num += item.cart_number
        })
        //给span标记进行赋值操作
        this.span.innerHTML = num
    }
}
new List()